<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 50px;
				/* 边框、背景颜色、查选择器是否选中，效果是否正确 */
				border: 1px solid black;
				background-color: #747474;
			}
			#body{
				width: 900px;
				height: 300px;
				border: 1px solid black;
				background-color: #fff;
			}
			#footer{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<!-- ①元素选择器：以元素名作为选择器，抓取元素
		     ②伪类选择器：原选择器上附加效果。   :hover 鼠标悬停
		                                      :before 在   前 添加文本，一般与content属性
											  :after  在   后 添加文本，一般与content属性
			 ③类选择器：以1个或多个别名作为选择器，抓取元素【页面微调】
			 ④通用选择器：抓取页面上所有元素，规范页面元素【盒模型、字体】
		     ⑤id选择器：用在页面结构搭建  【唯一性，切片】
		     语法：html 前标记 id="header"  别名
			       css  #header    别名
				   id选择器与class选择器区别
				   搭建页面结构，根据结构中小范围微调
		 -->
		<div id="header"></div>
		<!-- 作业：网页主体 900px  网页尾巴200px  颜色自定 -->
		<div id="body"></div>
		<div id="footer"></div>
	</body>
</html>